<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>修改手机号 - 社交平台</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    /* 基础样式 */
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #f5f7fa;
      color: #333;
      min-height: 100vh;
      margin: 0;
    }
    
    /* 顶部导航 */
    .top-nav {
      height: 50px;
      background-color: #fff;
      border-bottom: 1px solid #eee;
      display: flex;
      align-items: center;
      padding: 0 15px;
      position: sticky;
      top: 0;
      z-index: 100;
    }
    
    .nav-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0 auto;
    }
    
    .nav-btn {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #666;
      text-decoration: none;
    }
    
    /* 样式切换器 */
    .style-switcher {
      background-color: #fff;
      padding: 12px 15px;
      border-bottom: 1px solid #eee;
    }
    
    .style-tabs {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding-bottom: 5px;
    }
    
    .style-tabs::-webkit-scrollbar {
      display: none;
    }
    
    .style-tab {
      padding: 6px 14px;
      background-color: #f5f7fa;
      border-radius: 20px;
      font-size: 14px;
      white-space: nowrap;
      cursor: pointer;
    }
    
    .style-tab.active {
      background-color: #2196f3;
      color: white;
    }
    
    /* 通用修改手机号页面样式 */
    .phone-page {
      display: none;
      padding: 20px 15px;
    }
    
    .phone-page.active {
      display: block;
    }
    
    /* 表单基础样式 */
    .form-container {
      background-color: #fff;
      border-radius: 12px;
      padding: 25px 20px;
      margin-bottom: 20px;
    }
    
    .page-title {
      font-size: 22px;
      font-weight: 600;
      margin-bottom: 25px;
      text-align: center;
    }
    
    .form-group {
      margin-bottom: 20px;
    }
    
    .form-label {
      display: block;
      font-size: 15px;
      font-weight: 500;
      margin-bottom: 8px;
      color: #333;
    }
    
    .form-control {
      width: 100%;
      padding: 12px 15px;
      border: 1px solid #ddd;
      border-radius: 8px;
      font-size: 16px;
      box-sizing: border-box;
      transition: border-color 0.2s;
    }
    
    .form-control:focus {
      outline: none;
      border-color: #2196f3;
    }
    
    .input-group {
      display: flex;
      gap: 10px;
    }
    
    .verify-code {
      flex: 1;
    }
    
    .send-code {
      width: 110px;
      padding: 12px;
      background-color: #f5f7fa;
      color: #2196f3;
      border: none;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      white-space: nowrap;
    }
    
    .send-code:disabled {
      background-color: #eee;
      color: #999;
      cursor: not-allowed;
    }
    
    .form-hint {
      font-size: 13px;
      color: #666;
      margin-top: 5px;
      line-height: 1.4;
    }
    
    .btn {
      width: 100%;
      padding: 12px;
      border: none;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 500;
      cursor: pointer;
      transition: background-color 0.2s;
    }
    
    .btn-primary {
      background-color: #2196f3;
      color: white;
    }
    
    .btn-primary:hover {
      background-color: #1976d2;
    }
    
    .btn-primary:disabled {
      background-color: #90caf9;
      cursor: not-allowed;
    }
    
    .current-phone {
      display: flex;
      align-items: center;
      padding: 15px;
      background-color: #f0f7ff;
      border-radius: 8px;
      margin-bottom: 25px;
    }
    
    .current-phone-icon {
      width: 36px;
      height: 36px;
      background-color: #e3f2fd;
      color: #2196f3;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 12px;
    }
    
    .current-phone-info {
      flex: 1;
    }
    
    .current-phone-label {
      font-size: 13px;
      color: #666;
      margin-bottom: 3px;
    }
    
    .current-phone-number {
      font-size: 16px;
      font-weight: 500;
    }
    
    .security-tips {
      background-color: #f0f7ff;
      border-radius: 8px;
      padding: 15px;
      margin-top: 20px;
    }
    
    .tips-title {
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 10px;
      color: #1976d2;
      display: flex;
      align-items: center;
    }
    
    .tips-title i {
      margin-right: 8px;
    }
    
    .tips-list {
      font-size: 13px;
      color: #666;
      padding-left: 22px;
    }
    
    .tips-list li {
      margin-bottom: 8px;
      line-height: 1.4;
    }
    
    /* 样式1 - 标准样式 */
    .standard-style .form-container {
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }
    
    /* 样式2 - 卡片样式 */
    .card-style .form-container {
      border-radius: 20px;
      box-shadow: 0 5px 20px rgba(0,0,0,0.08);
      padding: 30px 25px;
    }
    
    .card-style .page-title {
      margin-bottom: 30px;
      font-size: 24px;
    }
    
    .card-style .form-control {
      border-radius: 10px;
      padding: 14px 15px;
    }
    
    .card-style .send-code {
      border-radius: 10px;
      padding: 14px;
    }
    
    .card-style .btn {
      border-radius: 10px;
      padding: 14px;
      font-size: 17px;
    }
    
    /* 样式3 - 简约样式 */
    .simple-style {
      background-color: #fff;
      min-height: 100vh;
    }
    
    .simple-style .form-container {
      box-shadow: none;
      padding: 0;
      background: none;
    }
    
    .simple-style .form-control {
      border: none;
      border-bottom: 1px solid #eee;
      border-radius: 0;
      padding-left: 0;
      padding-right: 0;
    }
    
    .simple-style .form-control:focus {
      border-color: #2196f3;
    }
    
    .simple-style .btn {
      margin-top: 20px;
    }
    
    .simple-style .current-phone {
      background-color: #f9f9f9;
    }
    
    /* 样式4 - 分步样式 */
    .step-style .form-container {
      position: relative;
      overflow: hidden;
      min-height: 380px;
    }
    
    .step-content {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      padding: 25px 20px;
      transition: transform 0.3s ease;
    }
    
    .step-content.active {
      transform: translateX(0);
    }
    
    .step-content.next {
      transform: translateX(100%);
    }
    
    .step-content.prev {
      transform: translateX(-100%);
    }
    
    .step-indicator {
      display: flex;
      justify-content: space-between;
      margin-bottom: 25px;
      position: relative;
    }
    
    .step-indicator::before {
      content: '';
      position: absolute;
      top: 15px;
      left: 30px;
      right: 30px;
      height: 2px;
      background-color: #eee;
      z-index: 1;
    }
    
    .step-item {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: #f5f7fa;
      color: #999;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 500;
      position: relative;
      z-index: 2;
    }
    
    .step-item.active {
      background-color: #2196f3;
      color: white;
    }
    
    .step-item.completed {
      background-color: #2196f3;
      color: white;
    }
    
    .step-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 20px;
      text-align: center;
    }
    
    .step-desc {
      text-align: center;
      color: #666;
      font-size: 14px;
      margin-bottom: 25px;
    }
    
    .btn-group {
      display: flex;
      gap: 10px;
      margin-top: 10px;
    }
    
    .btn-secondary {
      background-color: #f5f7fa;
      color: #333;
    }
    
    .btn-secondary:hover {
      background-color: #e9ecef;
    }
    
    .success-message {
      text-align: center;
      padding: 20px 0;
    }
    
    .success-icon {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background-color: #e8f5e9;
      color: #4caf50;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30px;
      margin: 0 auto 15px;
    }
    
    .success-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 10px;
    }
    
    .success-desc {
      font-size: 14px;
      color: #666;
      margin-bottom: 25px;
    }
    
    /* 提示框 */
    .toast {
      position: fixed;
      bottom: 80px;
      left: 50%;
      transform: translateX(-50%);
      background-color: rgba(0,0,0,0.8);
      color: white;
      border-radius: 8px;
      padding: 10px 15px;
      font-size: 14px;
      z-index: 1000;
      display: none;
    }
  </style>
</head>
<body>
  <!-- 提示框 -->
  <div class="toast" id="toast"></div>
  
  <!-- 顶部导航 -->
  <nav class="top-nav">
    <a href="#" class="nav-btn" id="backBtn">
      <i class="fa fa-angle-left"></i>
    </a>
    <h1 class="nav-title">修改手机号</h1>
  </nav>
  
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <div class="style-tabs">
      <div class="style-tab active" data-style="standard">标准样式</div>
      <div class="style-tab" data-style="card">卡片样式</div>
      <div class="style-tab" data-style="simple">简约样式</div>
      <div class="style-tab" data-style="step">分步样式</div>
    </div>
  </div>
  
  <!-- 样式1 - 标准样式 -->
  <div class="phone-page active standard-style" id="standard">
    <div class="form-container">
      <h2 class="page-title">修改手机号</h2>
      
      <div class="current-phone">
        <div class="current-phone-icon">
          <i class="fa fa-mobile"></i>
        </div>
        <div class="current-phone-info">
          <div class="current-phone-label">当前绑定手机号</div>
          <div class="current-phone-number">138****5678</div>
        </div>
      </div>
      
      <div class="form-group">
        <label class="form-label" for="verifyCode1">短信验证码</label>
        <div class="input-group">
          <input type="text" class="form-control verify-code" id="verifyCode1" placeholder="请输入验证码">
          <button type="button" class="send-code" onclick="sendCode('sendCode1', 60)">获取验证码</button>
        </div>
        <p class="form-hint">验证码将发送至当前手机号 138****5678</p>
      </div>
      
      <div class="form-group">
        <label class="form-label" for="newPhone1">新手机号</label>
        <input type="tel" class="form-control" id="newPhone1" placeholder="请输入新手机号">
      </div>
      
      <div class="form-group">
        <label class="form-label" for="newVerifyCode1">新手机验证码</label>
        <div class="input-group">
          <input type="text" class="form-control verify-code" id="newVerifyCode1" placeholder="请输入验证码">
          <button type="button" class="send-code" onclick="sendCode('sendCode2', 60)">获取验证码验证码</button>
        </div>
        <p class="form-hint">验证码将发送至新手机号</p>
      </div>
      
      <button class="btn btn-primary" onclick="showToast('手机号手机号修改手机号手机号成功')">确认修改</button>
      
      <div class="security-tips">
        <div class="tips-title">
          <i class="fa fa-shield"></i> 安全提示
        </div>
        <ul class="tips-list">
          <li>修改手机号后，将使用新手机号登录</li>
          <li>验证码有效期为10分钟，请及时输入</li>
          <li>如非本人操作，请请立即即联系客服</li>
        </ul>
      </div>
    </div>
  </div>
  
  <!-- 样式2 - 卡片样式 -->
  <div class="phone-page card-style" id="card">
    <div class="form-container">
      <h2 class="page-title">更换绑定手机号</h2>
      
      <div class="current-phone">
        <div class="current-phone-icon">
          <i class="fa fa-mobile"></i>
        </div>
        <div class="current-phone-info">
          <div class="current-phone-label">当前绑定绑定的手机号</div>
          <div class="current-phone-number">138****5678</div>
        </div>
      </div>
      
      <div class="form-group">
        <label class="form-label" for="verifyCode2">验证当前手机</label>
        <div class="input-group">
          <input type="text" class="form-control verify-code" id="verifyCode2" placeholder="请输入验证码">
          <button type="button" class="send-code" onclick="sendCode('sendCode3', 60)">获取验证码</button>
        </div>
        <p class="form-hint">验证码已发送至 138****5678</p>
      </div>
      
      <div class="form-group">
        <label class="form-label" for="newPhone2">新的手机号</label>
        <input type="tel" class="form-control" id="newPhone2" placeholder="请输入新的手机号">
        <p class="form-hint">请输入本人实名手机号</p>
      </div>
      
      <div class="form-group">
        <label class="form-label" for="newVerifyCode2">新手机验证</label>
        <div class="input-group">
          <input type="text" class="form-control verify-code" id="newVerifyCode2" placeholder="请输入验证码">
          <button type="button" class="send-code" onclick="sendCode('sendCode4', 60)">获取验证码</button>
        </div>
      </div>
      
      <button class="btn btn-primary" onclick="showToast('手机号修改成功')">完成更换</button>
    </div>
    
    <div class="security-tips">
      <div class="tips-title">
        <i class="fa fa-info-circle"></i> 安全说明
      </div>
      <ul class="tips-list">
        <li>更换手机号后，原手机号将无法用于登录</li>
        <li>所有安全验证将发送至新手机号</li>
        <li>每次获取验证码的间隔为60秒</li>
      </ul>
    </div>
  </div>
  
  <!-- 样式3 - 简约样式 -->
  <div class="phone-page simple-style" id="simple">
    <div class="form-container">
      <h2 class="page-title">修改手机号</h2>
      
      <div class="current-phone">
        <div class="current-phone-info">
          <div class="current-phone-label">当前手机号</div>
          <div class="current-phone-number">138****5678</div>
        </div>
      </div>
      
      <div class="form-group">
        <label class="form-label" for="verifyCode3">验证码</label>
        <div class="input-group">
          <input type="text" class="form-control verify-code" id="verifyCode3" placeholder="请输入验证码">
          <button type="button" class="send-code" onclick="sendCode('sendCode5', 60)">获取</button>
        </div>
      </div>
      
      <div class="form-group">
        <label class="form-label" for="newPhone3">新手机号</label>
        <input type="tel" class="form-control" id="newPhone3" placeholder="请输入新手机号">
      </div>
      
      <div class="form-group">
        <label class="form-label" for="newVerifyCode3">新验证码</label>
        <div class="input-group">
          <input type="text" class="form-control verify-code" id="newVerifyCode3" placeholder="请输入验证码">
          <button type="button" class="send-code" onclick="sendCode('sendCode6', 60)">获取</button>
        </div>
      </div>
      
      <button class="btn btn-primary" onclick="showToast('手机号修改成功')">确认修改</button>
    </div>
  </div>
  
  <!-- 样式4 - 分步样式 -->
  <div class="phone-page step-style" id="step">
    <div class="form-container">
      <div class="step-indicator">
        <div class="step-item active" data-step="1">1</div>
        <div class="step-item" data-step="2">2</div>
        <div class="step-item" data-step="3">3</div>
      </div>
      
      <!-- 步骤1：验证当前手机 -->
      <div class="step-content active" data-step="1">
        <h3 class="step-title">验证当前手机</h3>
        <p class="step-desc">请输入发送至 138****5678 的验证码</p>
        
        <div class="form-group">
          <label class="form-label" for="verifyCode4">验证码</label>
          <div class="input-group">
            <input type="text" class="form-control verify-code" id="verifyCode4" placeholder="请输入验证码">
            <button type="button" class="send-code" onclick="sendCode('sendCode7', 60)">获取验证码</button>
          </div>
        </div>
        
        <div class="btn-group">
          <button class="btn btn-secondary" onclick="showToast('取消修改')">取消</button>
          <button class="btn btn-primary" onclick="goToStep(2)">下一步</button>
        </div>
      </div>
      
      <!-- 步骤2：输入新手机号 -->
      <div class="step-content next" data-step="2">
        <h3 class="step-title">输入新手机号</h3>
        <p class="step-desc">请输入需要绑定的新手机号</p>
        
        <div class="form-group">
          <label class="form-label" for="newPhone4">新手机号</label>
          <input type="tel" class="form-control" id="newPhone4" placeholder="请输入新手机号">
        </div>
        
        <div class="form-group">
          <label class="form-label" for="newVerifyCode4">验证码</label>
          <div class="input-group">
            <input type="text" class="form-control verify-code" id="newVerifyCode4" placeholder="请输入验证码">
            <button type="button" class="send-code" onclick="sendCode('sendCode8', 60)">获取验证码</button>
          </div>
          <p class="form-hint">验证码将发送至新手机号</p>
        </div>
        
        <div class="btn-group">
          <button class="btn btn-secondary" onclick="goToStep(1)">上一步</button>
          <button class="btn btn-primary" onclick="goToStep(3)">下一步</button>
        </div>
      </div>
      
      <!-- 步骤3：完成 -->
      <div class="step-content next" data-step="3">
        <div class="success-message">
          <div class="success-icon">
            <i class="fa fa-check"></i>
          </div>
          <h3 class="success-title">手机号修改成功</h3>
          <p class="success-desc">您的手机号已成功更新，下次登录请使用新手机号</p>
          
          <button class="btn btn-primary" onclick="showToast('返回设置页面')">完成</button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 获取元素
    const styleTabs = document.querySelectorAll('.style-tab');
    const phonePages = document.querySelectorAll('.phone-page');
    const backBtn = document.getElementById('backBtn');
    const toast = document.getElementById('toast');
    let currentStep = 1;
    
    // 样式切换
    styleTabs.forEach(tab => {
      tab.addEventListener('click', function() {
        // 重置步骤
        currentStep = 1;
        updateStepUI();
        
        // 移除所有激活状态
        styleTabs.forEach(t => t.classList.remove('active'));
        phonePages.forEach(page => page.classList.remove('active'));
        
        // 设置当前激活状态
        this.classList.add('active');
        const style = this.getAttribute('data-style');
        document.getElementById(style).classList.add('active');
        
        showToast(`已切换到${this.textContent}`);
      });
    });
    
    // 返回按钮
    backBtn.addEventListener('click', function() {
      showToast('返回上一页');
    });
    
    // 发送验证码倒计时
    function sendCode(buttonId, seconds) {
      const button = document.querySelector(`.send-code[onclick*="${buttonId}"]`);
      if (button.disabled) return;
      
      button.disabled = true;
      let count = seconds;
      button.textContent = `${count}s后重发`;
      
      const timer = setInterval(() => {
        count--;
        button.textContent = `${count}s后重发`;
        
        if (count <= 0) {
          clearInterval(timer);
          button.disabled = false;
          button.textContent = '获取验证码';
        }
      }, 1000);
      
      showToast('验证码已发送，请注意查收');
    }
    
    // 步骤导航
    function goToStep(step) {
      const totalSteps = 3;
      
      if (step < 1 || step > totalSteps) return;
      
      // 更新步骤指示器
      document.querySelectorAll('.step-item').forEach(item => {
        const itemStep = parseInt(item.getAttribute('data-step'));
        item.classList.remove('active', 'completed');
        
        if (itemStep < step) {
          item.classList.add('completed');
        } else if (itemStep === step) {
          item.classList.add('active');
        }
      });
      
      // 更新步骤内容
      document.querySelectorAll('.step-content').forEach(content => {
        const contentStep = parseInt(content.getAttribute('data-step'));
        content.classList.remove('active', 'prev', 'next');
        
        if (contentStep === step) {
          content.classList.add('active');
        } else if (contentStep < step) {
          content.classList.add('prev');
        } else {
          content.classList.add('next');
        }
      });
      
      currentStep = step;
      
      if (step === 3) {
        showToast('手机号修改成功');
      }
    }
    
    // 更新步骤UI
    function updateStepUI() {
      goToStep(1);
    }
    
    // 显示提示
    function showToast(message) {
      toast.textContent = message;
      toast.style.display = 'block';
      
      setTimeout(() => {
        toast.style.opacity = '0';
        setTimeout(() => {
          toast.style.display = 'none';
          toast.style.opacity = '1';
        }, 300);
      }, 2000);
    }
  </script>
</body>
</html>
